<template>
  <div>
    <SubTitle mt="65px" title="日期与时间" />
    <div class="input-box">
      <el-date-picker
        v-model="incomeForm.date"
        type="datetime"
        style="width: 80%;"
        placeholder="默认此刻"
        value-format="x"
      />
    </div>
    <SubTitle mt="20px" title="金额" />
    <div class="input-box">
      <div class="amount-input">￥{{  incomeForm.amount  }}</div>
      <el-button type="primary" plain @click="iptShow = true">
        <template #icon>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-bianji"></use>
          </svg>
        </template>
        编辑
      </el-button>
      <NumberInput
        :num-show="iptShow"
        @close="iptShow = false"
        @confirm="(res) => incomeForm.amount = res"
      />
    </div>
    <SubTitle mt="20px" title="收入类型">
      <span class="income-class">当前：{{ incomeForm.class }}</span>
    </SubTitle>
    <ClassList height="60px">
      <div class="cls-box">
        <div class="cls-bar" v-for="item in incomeClassList" @click="selectClass(item)">
          {{ item.value }}
        </div>
      </div>
    </ClassList>
    <SubTitle mt="20px" title="备注"/>
    <div class="input-box">
      <el-input
        v-model="incomeForm.desc"
        maxlength="50"
        style="width: 90%;"
        placeholder="请输入备注"
        show-word-limit
        type="textarea"
      />
    </div>
    <div class="input-box">
      <el-button 
        @click="submitForm"
        size="large"
        type="primary"
        style="width: 80%; margin-top: 10px;"
      >
        确认
      </el-button>
    </div>
  </div>
</template>

<script setup>
  import NumberInput from '@/components/NumberInput.vue';
  import ClassList from '@/components/ClassList.vue';
  import SubTitle from '@/components/SubTitle.vue';
  import { incomeClassList } from '@/utils/constant';
  import { ref, reactive } from 'vue';
  import { useUserStore } from '@/stores/user';
  import { addRecordItem } from '@/utils/api';
  import message from '@/utils/message';
  import { useRouter } from 'vue-router';
  
  const useUser = useUserStore();
  const router = useRouter();
  let iptShow = ref(false);

  let incomeForm = reactive({
    date: "",
    class: "其它",
    amount: "0",
    desc: ""
  });

  const selectClass = (item) => {
    incomeForm.class = item.value;
  };

  const submitForm = () => {
    if(!incomeForm.date) {
      const now = new Date();
      incomeForm.date = now.getTime();
    }
    addRecordItem(useUser.userID, incomeForm.date, incomeForm.amount, incomeForm.class, incomeForm.desc, false)
      .then(res => {
        if(res.data.msg === "成功") {
          message.success('收入账目创建成功', 1200);
          setTimeout(() => router.back(), 1000);
        } else {
          message.warning(res.data.msg);
        }
      })
      .catch(err => {
        message.warning('系统错误，请重试');
        console.warn(err);
      });
  };
</script>

<style lang="scss" scoped>
  .cls-box{
    display: flex;
    flex-wrap: wrap;
    .cls-bar{
      height: 35px;
      line-height: 35px;
      width: fit-content;
      padding: 0 8px 0 8px;
      margin: 0 12px 12px 0;
      color: $theme-main-dark;
      font-size: 14px;
      background-color: $theme-shadow0;
      border-radius: 10px;
      cursor: pointer;
    }
    .cls-bar:hover{
      background-color: $theme-shadow00;
    }
  }
  .input-box{
    width: 100%;
    height: fit-content;
    display: flex;
    justify-content: center;
    margin-top: 10px;
  }
  .amount-input{
    font-size: 24px;
    font-weight: 600;
    color: $theme-main-dark;
    margin-right: 30px;
  }
  .income-class{
    margin-left: 12px;
    color: $theme0;
    font-size: 15px;
  }
</style>